<script setup lang="ts">
import type { TaskItem } from '@/api/types/workflow'
import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
import { getTodoTaskPage } from '@/api/workflow'
import { useFlow } from '@/hooks/useFlow'
import { useScroll } from '@/hooks/useScroll'

// 导入TodoCard组件
import TodoCard from './components/TodoCard.vue'

// 使用流程管理Hook
const { getProcessDetailPath } = useFlow()

// 待办事项数据类型适配
export interface TodoItemAdapted extends TaskItem {
  publishTime?: string // 发布时间
  workHoursSource?: string // 工时来源
  date?: string // 日期
  urgent?: boolean // 是否加急
  isProcessing?: boolean // 是否处理中
  path?: string // 用于跳转的路径
  status?: string // 状态
  durationInMillis?: number // 处理时长
  reason?: string // 审批意见
}

// 格式化日期
function formatDate(dateString?: string, format = 'yyyy-MM-dd') {
  if (!dateString) {
    return ''
  }
  const date = new Date(dateString)

  // 根据format参数格式化日期
  return format
    .replace('yyyy', date.getFullYear().toString())
    .replace('MM', (date.getMonth() + 1).toString().padStart(2, '0'))
    .replace('dd', date.getDate().toString().padStart(2, '0'))
    .replace('HH', date.getHours().toString().padStart(2, '0'))
    .replace('mm', date.getMinutes().toString().padStart(2, '0'))
    .replace('ss', date.getSeconds().toString().padStart(2, '0'))
}

// 获取待办列表数据
async function fetchTodoList(page: number, pageSize: number): Promise<TodoItemAdapted[]> {
  try {
    const res = await getTodoTaskPage({
      currentPage: page,
      numPerPage: pageSize,
    })

    if (res.data?.list) {
      console.log('待办列表数据:', res.data.list)
      // 适配数据格式
      return res.data.list.map((item: TaskItem) => {
        // 使用统一的路径获取函数，创建流程实例信息对象

        // 获取详情路径
        const path = getProcessDetailPath(item.taskName, item.processInstanceId, item.taskId)

        return {
          ...item,
          publishTime: item.createTime || '',
          date: item.createTime ? formatDate(item.createTime, 'yyyy-MM-dd') : '',
          status: '待审批', // 默认为待审批
          path,
        }
      })
    }
    return []
  }
  catch (error) {
    console.error('获取待审批列表失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none',
    })
    return []
  }
}

// 使用useScroll钩子
const { list, loading, finished, error, refresh, loadMore } = useScroll<TodoItemAdapted>({
  fetchData: fetchTodoList,
  pageSize: 20,
})

// 导航到详情页
function navigateToDetail(path: string) {
  uni.navigateTo({
    url: path,
    fail: (err) => {
      console.error('导航失败:', err)
    },
  })
}

// 下拉刷新处理
onPullDownRefresh(async () => {
  await refresh()
  uni.stopPullDownRefresh()
})

// 上拉加载处理
onReachBottom(() => {
  if (!loading.value && !finished.value) {
    loadMore()
  }
})

// 页面加载时自动刷新数据
onShow(() => {
  refresh()
})

// 页面配置
definePage({
  style: {
    navigationBarTitleText: '待办事项',
    enablePullDownRefresh: true,
    onReachBottomDistance: 100,
  },
})
</script>

<template>
  <view class="todo-container min-h-screen bg-slate-50 p-4 pb-20">
    <!-- 加载状态 -->
    <view v-if="loading && list.length === 0" class="loading-container mb-5 h-32 flex items-center justify-center">
      <view class="flex flex-col items-center">
        <view class="mb-3 h-8 w-8 animate-spin border-2 border-slate-200 border-t-primary rounded-full" />
        <text class="loading-text text-sm text-slate-500">加载中...</text>
      </view>
    </view>

    <!-- 待办事项列表 -->
    <view v-else-if="list.length > 0" class="todo-list flex flex-col gap-4">
      <TodoCard
        v-for="(item, index) in list"
        :key="item.processInstanceId || index"
        :item="item"
        @click="navigateToDetail(item.path)"
      />

      <!-- 加载更多提示 -->
      <view v-if="loading && list.length > 0" class="py-4 text-center text-gray-500">
        <view class="mb-1 inline-block h-4 w-4 animate-spin border-2 border-slate-200 border-t-primary rounded-full" />
        <text class="text-sm">加载中...</text>
      </view>

      <!-- 没有更多数据提示 -->
      <view v-if="finished && list.length > 0" class="py-4 text-center text-gray-500">
        <text class="text-sm">没有更多了</text>
      </view>

      <!-- 加载错误提示 -->
      <view v-if="error" class="py-4 text-center text-red-500">
        <text class="text-sm">加载失败，请重试</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="h-60 flex flex-col items-center justify-center empty-container">
      <view class="mb-4 h-20 w-20 flex items-center justify-center rounded-full bg-slate-100">
        <i class="i-solar:clipboard-remove-broken text-slate-400" size="36" />
      </view>
      <text class="empty-text text-base text-slate-500">暂无待审批事项</text>
      <text class="empty-subtext mt-2 text-sm text-slate-400">您的工作已全部完成</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.todo-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* 搜索框样式 - 保留但不使用 */
.search-input {
  &::placeholder {
    color: #94a3b8;
  }
}

/* 筛选标签样式 - 保留但不使用 */
.filter-tag {
  &:active {
    transform: scale(0.95);
  }
}

/* 待办项列表样式 - 组件内部样式已处理 */

/* 加载动画 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .todo-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;
  }
}

/* 优化按钮点击效果 */
button {
  &::after {
    border: none;
  }
}
</style>
